<script setup>
import { inject } from "vue";
import "@material/web/radio/radio.js";

const emit = defineEmits(["change"]);
const props = defineProps(["name", "value", "checked"]);

const groupValue = inject("radioGroupValue");
const groupChanged = inject("radioGroupChanged");

function changed(event) {
  emit("change", event);
  if (groupChanged) {
    groupChanged(props.value, event);
  }
}
</script>

<template>
  <li class="radio-item">
    <label>
      <md-radio :name="props.name" :value="props.value" :checked="props.checked || groupValue == props.value"
        @change="changed">
      </md-radio>
      <slot></slot>
    </label>
  </li>
</template>

<style scoped>
.radio-item>label {
  display: flex;
  align-items: center;
}

.radio-item>label>* {
  display: inline-block;
}

.radio-item md-radio {
  margin: 16px;
}
</style>
